import React from 'react';
import './Property.scss'
import { Menu, Layout } from 'antd';
import {
    HomeOutlined,
    ReadOutlined,
    CarOutlined,
    SettingOutlined,
} from '@ant-design/icons';
import { Link, Outlet } from 'react-router-dom'
import { useEffect, useState } from 'react';
// 定义布局
const { Sider, Content } = Layout;
// cebianlan

function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = [
    getItem(<Link to="/home/Property/PropertyOverview">物业总览</Link>, '1', <HomeOutlined />),
    getItem('访客管理', '2', <ReadOutlined />, [
        getItem(<Link to="/home/Property/VisitorInformationRegistration">访客信息登记</Link>, '3'),
        getItem(<Link to="/home/Property/VisitorEntryRecord">访客进出记录</Link>, '4'),
    ]),
    getItem("车辆管理", '5', <CarOutlined />, [
        getItem(<Link to="/home/Property/VehicleInformationManagement">车辆信息管理</Link>, '6'),
        getItem(<Link to="/home/Property/VehicleEntryRecord">车辆进出记录</Link>, '7'),
    ]),
    getItem('设备管理', '8', <SettingOutlined />, [
        getItem(<Link to="/home/Property/IntelligentEntrance">智能门禁管理</Link>, '9'),
        getItem(<Link to="/home/Property/RoadManagement">车辆道闸管理</Link>, '10'),
        getItem(<Link to="/home/Property/WatermeterManagement">智能水表管理</Link>, '11'),
        getItem(<Link to="/home/Property/ChargingpileManagement">充电桩管理</Link>, '12'),
        getItem(<Link to="/home/Property/SecurityMonitoring">安防监控管理</Link>, '13'),
        getItem(<Link to="/home/Property/IntelligentElevator">智能梯控管理</Link>, '14'),
        getItem(<Link to="/home/Property/IntelligentFire">智能消防管理</Link>, '15'),
        getItem(<Link to="/home/Property/IntelligentLighting">智能照明管理</Link>, '16'),
        getItem(<Link to="/home/Property/SourceNetwork">智能荷储管理</Link>, '17'),
    ])
]
const Property = () => {
    const [arr, setarr] = useState([])
    let arr2 = []
    useEffect(() => {
        const id = sessionStorage.getItem("id");
        items.forEach((v, i) => {
            console.log(v.label + ":" + i);
            if (id == 1 ) {
                arr2.push(v);
            } else if(id == 3){
                if(i == 0){
                    arr2.push(v);
                }
            }else if(id == 2){
                if(i==0 || i==3){
                    arr2.push(v);
                }
            }else {
                if (i == 0) {
                    if(i != 3){
                        arr2.push(v);
                    }
                }
            }
        })
        setarr(arr2)
        console.log("arr2" + arr2)
    }, [])
    return (
        <Layout style={{ minHeight: (document.body.clientHeight - 64) + 'px' }}>
            <Sider width={256}>
                <div
                    style={{
                        width: 256,
                    }}
                >
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="dark"
                        items={arr}
                    />
                </div>
            </Sider>
            <Layout>
                <Content>
                    <Outlet />
                </Content>
            </Layout>
        </Layout>

    );
};
export default Property
